<template>
    <div>
        <el-card shadow="always" :body-style="{ padding: '20px' }" :style="{ marginBottom: '20px' }">
            <CategorySelector :disabled="showState !== 1" />
        </el-card>
        <div>
            <SpuList v-if="showState === 1" @changeShowState="changeShowState" />
            <SpuForm v-if="showState === 2" @changeShowState="changeShowState" :spuInfo="spuInfo" />
            <SkuForm v-if="showState === 3" @changeShowState="changeShowState" :spuInfo="spuInfo" />
        </div>
    </div>
</template>

<script lang="ts">
import { defineComponent } from "vue";

export default defineComponent({
    name: "Spu",
});
</script>

<script setup lang="ts">
import SpuList from "@/components/Spu/SpuList.vue";
import SpuForm from "@/components/Spu/SpuForm.vue";
import SkuForm from "@/components/Spu/SkuForm.vue";
import { ref } from "vue";
import type { SpuInfoType } from "@/types/spu";
import { useCategoryStore } from "@/stores/category";
import { storeToRefs } from "pinia";

const categoryStore = useCategoryStore();
const { categoryId3 } = storeToRefs(categoryStore);

const showState = ref(1); // 1: SpuList, 2: SpuForm, 3: SkuForm

// 绑定事件切换组件
const changeShowState = (state: number, Spu?: SpuInfoType) => {
    showState.value = state;
    // 判断进入的是添加还是修改spu
    if (Spu) {
        // 修改spu,传递spu信息
        spuInfo.value = Spu;
    } else {
        // 添加spu,初始化spuInfo
        spuInfo.value = {
            category3Id: categoryId3.value as number,
            description: "",
            id: 0,
            spuImageList: [],
            spuName: "",
            spuSaleAttrList: [],
            tmId: 0,
        };
    }
};
// 初始化spuInfo的数据
const spuInfo = ref<SpuInfoType>({
    category3Id: 0,
    description: "",
    id: 0,
    spuImageList: [],
    spuName: "",
    spuSaleAttrList: [],
    tmId: 0,
});
</script>

<style scoped></style>
